<!DOCTYPE html>
<html lang="en">
<head>

    <% include head.ejs %>

    <link rel="stylesheet" href="/form/css/formValidation.css"/>
    <link rel="stylesheet" href="/css/summernote.css"/>
</head>
<style>
    .row {
        max-width: 1032px;
    }

    h2 {
        color: #428bca;
        text-align: center;
    }

    .edit-wrap {
        padding: 20px;
    }

    .edit-wrap > div {
        background-color: #ffffff;
    }

    .download {
        margin: 10px 0;
        text-align: center;
        font-size: 20px;
    }
</style>

<body>

<section id="container">
    <!-- **********************************************************************************************************************************************************
    TOP BAR CONTENT & NOTIFICATIONS
    *********************************************************************************************************************************************************** -->
    <!--header start-->
    <% include header.ejs %>
    <!--header end-->

    <!-- **********************************************************************************************************************************************************
    MAIN SIDEBAR MENU
    *********************************************************************************************************************************************************** -->
    <!--sidebar start-->
    <% include sidebar.ejs %>
    <!--sidebar end-->

    <!-- **********************************************************************************************************************************************************
    MAIN CONTENT
    *********************************************************************************************************************************************************** -->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">

            <div class="row">

                <h2>文档编辑器</h2>

                <div id="edit-wrap" class="edit-wrap col-md-12">

                    <div id="summernote">
                    </div>
                </div>
                <div class="download">
                    <a id="btn-download" href="javascript:void(0);" class="btn btn-lg btn-primary">保存文档</a>
                    <a id="btn-reset" href="javascript:void(0);" class="btn btn-lg btn-danger">重置</a>
                </div>
            </div>

            <div class="modal" id="modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title text-center" id="myModalLabel">
                            </h4>
                        </div>
                        <form id="form-article" class="form">
                            <div id="modal-body" class="modal-body">

                                <div class="row">
                                    <div class="col-md-12">
                                        <h4 class="text-center">保存文档</h4>


                                        <div id="titleGroup" class="form-group">
                                            <input type="text" class="form-control" placeholder="标题(1-30位)" id="title"
                                                   name="title">
                                        </div>

                                        <div id="categoryGroup" class="form-group">
                                            <select id="category" name="category" class="form-control">
                                            </select>
                                        </div>

                                        <input type="hidden" id="_id" name="_id" value=""/>

                                        <div id="abstractGroup" class="form-group">
                                <textarea placeholder="备注" id="abstract" name="abstract" class="form-control"
                                          rows="3"></textarea>
                                        </div>

                                    </div>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary" id="btn-send">提交</button>
                            </div>
                        </form>
                    </div>

                </div>

            </div>

        </section>
        <! --/wrapper -->
    </section>
    <!-- /MAIN CONTENT -->

    <!--main content end-->
    <!--footer start-->
    <footer class="site-footer">
        <div class="text-center">
            2014 - Alvarez.is
            <a href="form_component.html#" class="go-top">
                <i class="fa fa-angle-up"></i>
            </a>
        </div>
    </footer>
    <!--footer end-->
</section>

<% include basejs.ejs %>

<!--表单验证插件-->
<script type="text/javascript" src="/form/js/formValidation.js"></script>
<script type="text/javascript" src="/form/js/framework/bootstrap.js"></script>
<script type="text/javascript" src="/form/js/language/zh_CN.js"></script>


<script src="/js/vendor/summernote.min.js"></script>
<script src="/js/vendor/summernote-zh-CN.js"></script>
<script src="/js/model/Article.js"></script>
<script src="/js/model/Category.js"></script>
<script>
    $(function () {
        var article = new Article();
        var contentHtml;

        $('#summernote').summernote({
            height: 500,
            minHeight: null,
            maxWidth: null,
            focus: true,
            lang: 'zh-CN'
//            toolbar: [
//                    ['font',['Arial', 'Arial Black', 'Comic Sans MS', 'Helvetica', '宋体', 'Impact', 'Tahoma', 'Microsoft YaHei', 'SimHei']]
//            ]
        });

        Category.getList('article',function (data) {

            var categoryList = data.category;

            var html = '';
            categoryList.forEach(function (category) {
                html += '<option value="' + category.name + '">' + category.name + '</option>';
            });
            $('#category').html(html);

        }, function (err) {
            alert(err);
        });

        <%if (_id) {%>

        showLoading('#edit-wrap', 'win8_linear');
        Article.getById('<%-_id%>', getArticleSuccess, getArticleError);

        function getArticleSuccess(data) {

            $('#edit-wrap').waitMe('hide');
            var result = data.article;
            contentHtml = result.content;
            $('#_id').val(result._id);
            $('#title').val(result.title);
            $('#abstract').val(result.abstract);
            $('#category').val(result.category);
            $('#summernote').code(contentHtml);
        }

        function getArticleError() {
            $('#edit-wrap').waitMe('hide');
        }

        <%}%>


        $('#btn-download').on('click', function () {
            contentHtml = $('#summernote').code();
            $('#modal').modal('show');
        });

        $('#form-article')
                .formValidation({
                    message: '未通过验证',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        title: {
                            message: '标题无效',
                            validators: {
                                notEmpty: {
                                    message: '不能为空'
                                },
                                stringLength: {
                                    min: 1,
                                    max: 30,
                                    message: '长度仅能为1-30'
                                },
                                regexp: {
                                    regexp: /^[A-Za-z0-9\u4e00-\u9fa5_]+$/,
                                    message: '含有特殊字符'
                                }
                            }
                        },
                        abstract: {
                            message: '备注无效',
                            validators: {
                                notEmpty: {
                                    message: '不能为空'
                                }
                            }
                        }
//                email: {
//                    validators: {
//                        notEmpty: {
//                            message: 'The email address is required and can\'t be empty'
//                        },
//                        emailAddress: {
//                            message: 'The input is not a valid email address'
//                        }
//                    }
//                },
//                password: {
//                    validators: {
//                        notEmpty: {
//                            message: 'The password is required and can\'t be empty'
//                        }
//                    }
//                }
                    }
                })
                .on('success.form.fv', function (e) {
                    // Prevent form submission
                    e.preventDefault();

                    // Get the form instance
                    var $form = $(e.target);

                    // Get the FormValidation instance
                    var bv = $form.data('formValidation');

                    // Use Ajax to submit form data
                    article._id = $('#_id').val();
                    article.title = $('#title').val();
                    article.abstract = $('#abstract').val();
                    article.category = $('#category').val();
                    article.content = contentHtml;
                    showLoading('#modal-body', 'win8_linear');
                    article.save(function () {
                        $('#modal-body').waitMe('hide');
                        location.href = '/admin/articles/'
                    });
                });
    });
</script>

</body>
</html>
